<template>
	<div>
		<el-dialog title="补料详情" width="80%" @open="open" class="icon-dialog" :visible.sync="show" :before-close="closeForm" append-to-body>
      <div>
        <el-button type="primary" size="small" icon="el-icon-check" @click="saveSuppliment()" :disabled="header.status === 'audit' || header.status === 'save'">&nbsp;保&nbsp;存&nbsp;</el-button>
        <el-button type="primary" size="small" icon="el-icon-s-promotion"  @click="audit()" :disabled="header.status === 'audit' || header.status === 'unAudit'">&nbsp;审&nbsp;核&nbsp;</el-button>
        <el-button type="primary" size="small" icon="el-icon-s-sort"  @click="unAudit()" :disabled="header.status === 'save' || header.status === 'unAudit'">&nbsp;反&nbsp;审&nbsp;</el-button>
        <el-button type="success" size="small" icon="el-icon-s-promotion" @click="getPpBom" v-if="header.status === 'unAudit'">获取用料清单</el-button>
      </div>
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('field.Suppliment_billNo')">{{header.billNo}} </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('field.Suppliment_taskBillNo')">{{header.taskBillNo}} </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('field.Suppliment_status')">
              <el-tag :type="header.status === 'save'? '': (header.status === 'audit'? 'success': 'danger')">{{ header.status === 'save'? '保存': (header.status === 'audit'? '审核': '创建') }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('field.Suppliment_createTime')">{{header.createTime}} </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('field.Suppliment_picker')">{{header.stocker}} </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('field.Suppliment_count')">{{header.count}} </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="dataList" height="calc(100vh - 250px)">
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column label="物料编码" width="120" prop="materialNo"></el-table-column>
        <el-table-column label="物料名称" width="120" prop="materialName"></el-table-column>
        <el-table-column label="物料规格" width="120" prop="specification"></el-table-column>
        <el-table-column label="数量" width="150" prop="count" align="center">
          <template slot-scope="scope">
            <el-input   size="small" v-model="scope.row.count"  style="width: 80px;" :min="0"   :disabled="header.status === 'audit' || header.status === 'save'" />
          </template>
        </el-table-column>
        <el-table-column label="单位" width="60" prop="unit"></el-table-column>
        <el-table-column label="仓库" width="100" prop="stockNo">
          <template slot-scope="scope">
            <el-select  v-model="scope.row.stockNo" clearable  placeholder="请选择仓库"  size="small" :disabled="header.status === 'audit' || header.status === 'save'">
              <el-option v-for="item in stockList" :key="item.stockNo" :label="item.stockName" :value="item.stockNo"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="批次" width="100" prop="flot" >
          <template slot-scope="scope" >
            <el-input  v-if="scope.row.isFlot == true" size="small" v-model="scope.row.flot"  style="width: 80px;"  :disabled="header.status === 'audit' || header.status === 'save'" />
          </template>
        </el-table-column>
        <!--        <el-table-column label="生产车间" width="80" prop="workShop"></el-table-column>-->
        <el-table-column label="生产日期" width="180" prop="produceDate" align="center">
          <template slot-scope="scope" v-if="scope.row.isProduce == true">
            <el-date-picker :disabled="header.status === 'audit' || header.status === 'save'" v-model="scope.row.produceDate" value-format="yyyy-MM-dd" size="small" clearable placeholder="选择生产日期">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="有效期至" width="120" prop="expiryDate">
          <template slot-scope="scope" v-if="scope.row.isProduce == true && scope.row.expiryDate" >
            <el-date-picker :disabled="header.status === 'audit' || header.status === 'save'" v-model="scope.row.expiryDate" value-format="yyyy-MM-dd" size="small" clearable placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="160" v-if="header.status === 'unAudit'">
          <template slot-scope="scope">
            <div v-if="scope.row.id">
              <el-button size="small" type="text" style="color:#FF0000;" @click="deleteDetail(scope.row)" ><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--用料清单-->
      <el-dialog title="用料清单"  :visible.sync="bomShow" center width="1000px"  top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">
        <el-table :data="bomList" height="60vh">
          <el-table-column label="物料编码" property="materialNo"></el-table-column>
          <el-table-column label="物料名称" property="materialName"></el-table-column>
          <el-table-column label="物料规格" property="specification"></el-table-column>
          <el-table-column label="单位" property="unit"></el-table-column>
          <el-table-column label="分子" property="numerator"></el-table-column>
          <el-table-column label="分母" property="denominator"></el-table-column>
          <el-table-column label="固定损耗率" property="fixscrapqty"></el-table-column>
          <el-table-column label="变动损耗率" property="scraprate"></el-table-column>
          <el-table-column label="标准用量" property="stdQty"></el-table-column>
          <el-table-column label="需求用量" property="needQty"></el-table-column>
          <el-table-column label="应发数量" property="mustQty"></el-table-column>
          <el-table-column label="几锅完成" property="batch"></el-table-column>
          <el-table-column label="生产订单号" property="taskBillNo"></el-table-column>
        </el-table>
        <div>
          <el-button type="primary" @click="changeSuppliment()">覆盖补料单</el-button>
          <el-button type="info" @click="changeBomShow()">取消</el-button>
        </div>
      </el-dialog>
		</el-dialog>
	</div>
</template>
<script>
import { detail,
  bomList,
  changeSuppliment,
  saveSuppliment,
  audit,
    unAudit,
  deleteDetail} from '@/api/app/suppliment'
import {list} from "@/api/app/stocklist";

export default {
	name:'supplimentdetail',
  inject:['reload'],
	props: {
		show: {
			type: Boolean,
			default: true
		},
		size: {
			type: String,
			default: 'mini'
		},
		info: {
			type: Object,
		},
	},
	data() {
		return {
			header:{},
      dataList:[],
      stockList:[],
      bomList:[],
      bomShow:false,
		}
	},
	watch:{
		show(val){
			if(val){
			}
		}
	},
	methods: {
    deleteDetail(row){
      this.$confirm('是否确认删除',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then(() =>{
        deleteDetail({id : row.id}).then(res => {
          console.log(res)
          this.open()
        })
      }).catch(()=>{

      })
    },
    audit(){
      audit({id:this.header.id}).then(res =>{
        if (res.data == true){
          this.$message.success("审核成功")
          this.open()
          this.reload()
        } else {
          this.$message.warning(data.msg)
          this.open()
        }
      })
    },
    unAudit(){
      unAudit({id:this.header.id}).then(res =>{
        if (res.data == true){
          this.$message.success("反审成功")
          this.open()
          this.reload()
        } else {
          this.$message.warning(data.msg)
          this.open()
        }
      })
    },
    saveSuppliment(){
      saveSuppliment({header :this.header ,dataList : this.dataList}).then(res =>{
        if(res.data == true){
          this.$message.success("保存成功")
          this.open()
        } else {
          this.$message.warning(data.msg)
          this.open()
        }
      })
    },
    /**
     * 用料清单覆盖补料单
     */
    changeSuppliment(){
      if (this.bomList === null || this.bomList.length === 0){
        return;
      }
      this.$confirm('是否确认覆盖领料单',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then(() =>{
        changeSuppliment({header:this.header,dataList : this.bomList}).then(res => {
          this.dataList = res.data.dataList
          this.bomShow = false
        })
      }).catch(()=>{

      })
    },
    changeBomShow(){
      this.bomShow = false
    },
    /**
     * 获取补料单的用料清单
     */
    getPpBom(){
      bomList({taskBillNo:this.header.taskBillNo}).then(res =>{
        this.bomList = res.data.dataList
        this.bomShow = true
      })
    },
    getStock(){
      list().then(res => {
        this.stockList = res.data
      })
    },
		open(){
			detail(this.info).then(res => {
				this.header = res.data.header
        this.dataList = res.data.dataList
			})
		},
		closeForm(){
			this.$emit('update:show', false)
		}
	},
  mounted() {
    this.getStock()
  }
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>
